<template>
  <view>
    <ugo-search></ugo-search>
    <u-swiper
      :list="swipeList"
      border-radius="0"
      name="image_src"
      height="340"
    ></u-swiper>
    <!-- 分类 -->
    <view class="nav u-flex u-row-around">
      <navigator v-for="item in navList" :key="item.name">
        <u-image width="128rpx" height="140rpx" :src="item.image_src">
        </u-image>
      </navigator>
    </view>
    <!-- 楼层图 -->
    <view class="floor">
      <!-- 每一个框架 -->
      <view
        class="floor-group"
        v-for="item in floorList"
        :key="item.floor_title.name"
      >
        <!-- 头部 -->
        <view class="floor-item-title u-m-t-15">
          <u-image mode="widthFix" :src="item.floor_title.image_src"></u-image>
        </view>
        <!-- 内容 -->
        <view class="floor-item-content">
          <navigator v-for="item1 in item.product_list" :key="item1.name">
            <u-image
              width="100%"
              height="100%"
              mode="scaleToFill"
              :src="item1.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swipeList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    // 在onload生命周期中调用
    this.getSwipe();
    this.getNav();
    this.getFloor();
  },
  methods: {
    //获取轮播图图片
    async getSwipe() {
      this.swipeList = await this.$u.get("/home/swiperdata");
    },
    //  获取导航数据
    async getNav() {
      this.navList = await this.$u.get("/home/catitems");
    },
    //  获取楼层数据
    async getFloor() {
      this.floorList = await this.$u.get("/home/floordata");
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  padding: 8rpx;
}
.floor-item-content {
  overflow: hidden;
  navigator {
    float: left;
    margin-left: 15rpx;
  }
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  navigator:nth-last-child(-n + 2) {
    margin-top: 11rpx;
  }
}
</style>